<template>
	<view>
		<view class="navtit">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
				<view class="swiperbox">
					<view class="scroll-view-item_H" v-for="(item,index) in catelist" :key="index"  @click="changecate(item,index)">
						<view :style="{'color':index==navindex?'#FF6178':'','border-bottom':index==navindex?'solid 2rpx #FF6178':'solid 2rpx #FFF'}">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
			<!-- <view class="openbox" @click="open()" v-if="popupindex">
				<image src="../../static/jt2.png"></image>
			</view>
			<view class="openbox" @click="close()" v-else>
				<image src="../../static/jt3.png"></image>
			</view> -->
		</view>
		<view style="height: 100rpx;"></view>
		<classlist :list="list"></classlist>
		<kong v-if="list.length==0"></kong>
		<!-- 顶部弹窗 -->
		<uni-popup ref="popup" type="right" background-color="#F7F7F7">
			<view style="height: 84rpx;"></view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll">
				<view v-for="(item,index) in childrenlist" :key="index" class="scroll-view-item">
					<view class="titlebox">
						{{item.name}}
					</view>
					<view class="boxitem">
						<view class="itembox" v-for="(sitem,sindex) in item.child" :key="sindex" @click="changebx(sitem,sindex)"
							:style="{'color':sindex==snavindex?'#FFF':'','border':sindex==snavindex?'2rpx solid #FF8A9B':'','background':sindex==snavindex?' #FF8A9B':''}">
							{{sitem.name}}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="navbut">
				<view class="but">
					<view @click="reset()" style="color: #FF6178;background-color: #FFF;border-radius:42rpx 0rpx 42rpx 42rpx;">重置</view>
					<view @click="sure()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import classlist from '../../components/classlist.vue'
	import kong from '../../components/kong.vue'
	export default {
		components:{
			classlist,kong
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				catelist:[],
				navindex:null,
				popupindex:true,
				scrollTop: 0,
				childrenlist: [],
				is_data:true,
				snavindex:null,
				page:1,
				list:[],
				cate_id:'',
			}
		},
		onLoad() {
			this.getcatelist()
			this.getlist()
		},
		onReachBottom() {
			this.is_data&&this.getlist()
		},
		methods: {
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			//选择分类
			changecate(item,index){
				this.navindex = index
				this.childrenlist = this.catelist[this.navindex].child
				this.open()
			},
			open(){
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('right')
				this.popupindex = false
			},
			close(){
				this.$refs.popup.close()
				this.popupindex = true
			},
			changebx(sitem,sindex){
				this.snavindex = sindex
				console.log(sitem,'item')
				this.cate_id = sitem.id
			},
			//课程分类
			getcatelist() {
				this.$http({
					url: '/api/Course/course_cate',
				}).then(res => {
					this.catelist = res.data
				})
			},
			//课程列表
			getlist() {
				this.$http({
					url: '/api/Course/index',
					data: {
						limit: 20,
						cate_id:this.cate_id,
						page: this.page,
						is_hk:1,
					}
				}).then(res => {
					if(res.data.length){
						this.page++
						this.list.push(...res.data)
						return
					}
					this.is_data = false
				})
			},
			//重置
			reset(){
				this.snavindex= null
			},
			sure(){
				this.page = 1
				this.list=[]
				this.close()
				this.getlist()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navtit{
		position: fixed;
		top: 0;
		width: 750rpx;
		height: 84rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		z-index: 9999;
		.scroll-view_H {
			white-space: nowrap;
			width:750rpx;
			.scroll-view-item_H {
				display: inline-block;
				width: fit-content;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				font-size: 36rpx;
				padding: 0 15rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				border-bottom:solid 2rpx #FFF
			}
			
		}
		.openbox{
			width: 72rpx;
			height: 84rpx;
			background: #FFFFFF;
			text-align: center;
			line-height: 84rpx;
			image{
				width: 27rpx;
				height: 15rpx;
			}
		}
	}
	.tiptype {
		width: 100%;
		padding-top: 84rpx;
		background-color: #FFF;
	
		.boxitem {
			display: flex;
			flex-wrap: wrap;
			width: 690rpx;
			padding: 40rpx 30rpx;
	
			.itembox {
				height: 72rpx;
				border-radius: 40rpx;
				border: 2rpx solid #999999;
				line-height: 72rpx;
				width: fit-content;
				padding: 0 50rpx;
				margin-right: 24rpx;
				margin-bottom: 20rpx;
			}
		}
	}
	.scroll-Y {
		height: 80vh;
		background-color: #F7f7f7;
		width: 570rpx;
	
		// padding-top: 84rpx;
		.scroll-view-item {
			background-color: #FFF;
			// height: 300rpx;
			width: 514rpx;
			padding: 0 28rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			margin-bottom: 20rpx;
	
			.titlebox {
				height: 112rpx;
				line-height: 112rpx;
			}
			.boxitem {
				display: flex;
				flex-wrap: wrap;
				width: 570rpx;
			
				// padding: 40rpx 30rpx;
			
				.itembox {
					height: 72rpx;
					border-radius: 40rpx;
					border: 2rpx solid #999999;
					line-height: 72rpx;
					width: fit-content;
					padding: 0 50rpx;
					margin-right: 24rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
	.navbut{
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #f7f7f7;
		height: 90rpx;
		z-index: 999;
		.but{
			width: 510rpx;
			height: 84rpx;
			background: #FF8A9B;
			border-radius: 42rpx;
			opacity: 1;
			border: 2rpx solid #FF8A9B;
			display: flex;
			align-items: center;
			margin: 0 auto;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			>view{
				width:255rpx;
				text-align: center;
				line-height: 84rpx;
				border-radius: 42rpx;
			}
		}
	}

</style>
